<template>
    <div v-if="showDialog" class="festival-container">
        <div class="festival-box">
            <div class="close pointer" @click="handleClose">
                <img src="../../assets/closetwo.png" alt="" class="icon-close">
            </div>
            <div class="festivel-content">
                <img src="../../assets/festival/bg-1.png" alt="" class="icon-img">
                <div class="p1">尊敬的用户，您好！</div>
                <div class="p1 p2">受中国人民银行（简称“央行”）支付系统影响，“公对公充值”将在2023年中秋和国庆假期之间关闭运行</div>
                <div class="fc-brown bold">具体时间安排如下：</div>
                <div>
                    <span class="fc-pink bold">9月29日 00:00 — 10月6日 24:00</span>
                    <span class="fc-brown bold">为关闭时间；</span>
                    <span class="fc-pink bold">10月7日 00:00</span>
                    <span class="fc-brown bold">恢复正常；</span>
                    其余时间段与常规状态一致
                </div>
                <div class="dash-border">
                    请提前充值做好工资备款，避免中途账户余额不足“公对公充值”关闭时间段，法人可以在小程序中使用管理员 个人充值
                    <span class="fc-brown bold">请合理安排发薪专户的转账充值，以免影响假期使用。</span>
                </div>
                <div class="hint">注意：以上时间仅针对于公对公充值，假期期间发薪系统正常运营</div>
                <img src="../../assets/festival/bg-2.png" alt="" class="icon-img mg-t-8">
                <div>
                    <span class="fc-brown bold">01.</span>
                    系统正常操作加减保，<span class="fc-brown bold">日日保</span>投保时间<span class="fc-brown bold">不受影响</span>
                </div>
                <div>
                    <span class="fc-brown bold">02.</span>
                    为了避免影响您的加减保操作，建议您28号当天可以多充值部分保费(用不完可以退回)保证账户余额充足，以供假期时间使用
                </div>
                <div>
                    <span class="fc-brown bold">03.</span>
                    在线报案功能不受影响，系统都可操作(24小时之内系统操作在线报案)，上班之后理赔老师第一时间受理哦
                </div>
                <div class="hint">注意:如有其他问题咨询，请联系您的业务经理或服务群内沟通，都会第一时间给您处理的</div>
            </div>
            <div class="hint-2">子弹人力云全体员工祝您：节日快乐！</div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showDialog: false
        }
    },
    watch: {
        show: {
            handler(newval) {
                this.showDialog = newval
            },
            immediate: true
        },
        showDialog(newval) {
            this.$emit('update:show', newval)
        }
    },
    methods: {
        handleClose() {
            sessionStorage.setItem('festivalClose', true)
            this.showDialog = false
        }
    }
}
</script>
<style lang="stylus" scoped>
.festival-container
    position fixed
    left 0
    top 0
    width 100%
    height 100%
    background rgba(0, 0, 0, 0.7)
    z-index 100
.festival-box
    width 800px
    height 605px
    background url('../../assets/festival/background.png') no-repeat
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)
.icon-img
    width 164px
    height 43px
.festivel-content
    width 728px
    height 394px
    background #fff
    border-radius 20px
    margin-top 150px
    margin-left 24px
    padding 2px 18px
.fc-brown
    color: #7A3822
.fc-pink
    color #FF5347
.dash-border
    border-top 1px dashed #B2B2B2
    padding-top 8px
    margin-top 8px
.p1
    line-height 24px
.p2
    text-indent 2em
.hint
    font-size 12px
    color rgba(0, 0, 0, 0.6)
    margin-top 8px
.mg-t-8
    margin-top 8px
.hint-2
    color #FEFBEA
    font-size 12px
    text-align center
    margin-top 8px
.icon-close
    position absolute
    right 18px
    top -30px
    width 36px
    height 36px
</style>